<template>
  <div class="wrapper">
    <div class="title">我的全部购物车</div>
    <!-- 有 => 循环 -->
    <div
      class="cart"
      v-for="(cart, key) in list"
      @click="() => handleCartClick(key)"
    >
      <!-- 标题 -->
      <div class="cart__title">{{ cart.shopName }}</div>
      <!-- 内容 -->
      <div class="cart__item" v-for="product in cart.productList">
        <img class="cart__img" :src="product.imgUrl" />
        <div class="cart__content">
          <p class="cart__content__title">{{ product.name }}</p>
          <p class="cart__content__price">
            <span class="cart__content__price__num">
              <span class="yen">&yen;</span>{{ product.price }} X
              {{ product.count }}
            </span>
            <span class="cart__content__price__total">
              <span class="yen">&yen;</span
              >{{ (product.price * product.count).toFixed(2) }}
            </span>
          </p>
        </div>
      </div>
      <!-- 总数 -->
      <div class="cart__total">共计{{ cart.total }}件</div>
    </div>
    <!-- 没有商品 -->
    <div class="noGoods" v-if="Object.keys(list).length === 0">暂无数据</div>
  </div>
  <Docker :currentIndex="1" />
</template>

<script>
import { useRouter } from 'vue-router';
import Docker from '../../components/Docker.vue';

export default {
  name: 'CartList',
  components: { Docker },

  setup() {
    const list = JSON.parse(localStorage.cartList || '{}');
    console.log(list);
    // 计算购物车总件数的逻辑
    for (const i in list) {
      const cart = list[i];
      const productList = cart.productList;
      let total = 0;
      for (const j in productList) {
        // let num = Object.keys(productList);
        // console.log(num);
        // total = num[num.length - 1];
        const product = productList[j];
        total += product.count;
      }
      cart.total = total;
    }
    //点击订单
    const router = useRouter();
    const handleCartClick = (key) => {
      router.push(`/orderConfirm/${key}`);
    };

    return { list, handleCartClick };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
@import '../../style/mixins.scss';
.wrapper {
  overflow-y: auto;
  @include fix-content;
  background-color: $content-bgColor;
}
.title {
  line-height: 0.44rem;
  text-align: center;
  font-size: 0.16rem;
  color: $content-fontColor;
  background-color: $bgColor;
}

.cart {
  margin: 0.16rem 0.18rem;
  padding-bottom: 0.16rem;
  background-color: $bgColor;
  &__title {
    padding: 0.16rem;
    line-height: 0.22rem;
    font-size: 0.16rem;
    color: $content-fontColor;
    @include ellipsis;
  }
  &__item {
    display: flex;
    padding: 0 0.16rem 0.16rem;
  }
  &__img {
    width: 0.46rem;
    height: 0.46rem;
    margin-right: 0.16rem;
  }
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &__title {
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-fontColor;
      @include ellipsis;
    }
    &__price {
      display: flex;
      justify-content: space-between;
      font-size: 0.14rem;
      &__num {
        line-height: 0.2rem;
        color: $highlight-fontColor;
      }
      &__total {
        color: $dark-fontColor;
      }
    }
    .yen {
      font-size: 0.12rem;
    }
  }
  &__total {
    line-height: 0.28rem;
    margin: 0 0.16rem;
    text-align: center;
    font-size: 0.14rem;
    background-color: $light-fontColor;
  }
}
.noGoods {
  text-align: center;
  margin: 0.2rem;
  padding: 0.15rem;
  font-size: 0.15rem;
  background-color: $light-fontColor;
}
</style>
